<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Gone To GitHub</title>
    <script src="jquery.js"></script>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
<script>
$(document).ready(function() {
	var draw=false;
	var img_formatted = new Image();
	img_formatted.src = 'images/grid/data_formatted.png';
	var canvas = document.getElementById("can");
	var ctx = canvas.getContext("2d");
	ctx.strokeStyle = 'red';
	
	//set it true on mousedown
	$("#can").mousedown(function()
	{
		draw=true;
		ctx.drawImage(img_formatted,0,0);
	});

	//reset it on mouseup
	$("#can").mouseup(function(){draw=false;});

	$("#can").mousemove(function(e)
	{
		if(draw==true)
		{
			ctx.lineWidth = 15;
			ctx.lineCap = "round";
			ctx.beginPath();
			ctx.moveTo(e.pageX,e.pageY);
			ctx.lineTo(e.pageX+1,e.pageY+1);
			ctx.stroke();
		}    
	});

        
       //code for color pallete
        $("#clr > div").click(
        function(){
               ctx.strokeStyle = $(this).css("background-color");
        });
     
        //Eraser
        $("#eraser").click(function(){
        ctx.strokeStyle = '#fff';
        });

        //Code for save the image
        $("#save").click(function(){ 
            $("#result").append("<br /><br /><img src="+
            canvas.toDataURL()+ 
           " /><br /><a href="+canvas.toDataURL()+ 
           " target='_blank'>show</a>");
        });
     
        //Clear 
        $("#clear").click(function(){
                 ctx.fillStyle = "#fff";
                 ctx.fillRect(0, 0, canvas.width, canvas.height);
                 ctx.strokeStyle = "red";
                 ctx.fillStyle = "red";
            }
            );
});

</script>
    <header>
        <h1>Trzeron</h1>
    </header>

    <section>
    <p>
      Yeah, in a state of vague sleep deprivation I may have moved the
      project over to <a href="http://www.github.com">GitHub</a> instead
      of Google Code.
    </p>
    
    <p>
      Good news is that there's a <a href="http://code.google.com/p/tortoisegit/downloads/detail?name=Tortoisegit-1.6.5.0-64bit.msi">TortoiseGit</a> for
      silly Windows people. I guess. Meh.
    </p>
<!--
<canvas id="can" width="1280" height="720" > </canvas> 
<div id="clr"> 
<div style="background-color:black;"></div> 
<div style="background-color:red;"></div> 
<div style="background-color:green;"> </div> 
<div style="background-color:orange;"> </div>
<a href="#" id="clear" >Clear</a> 
<a id="save" href="#">Save</a> 
<a id="eraser" href="#">Eraser</a> 
<span id="result" ></span> 
        
    </section>
    -->
</body>

</html>
